<template>
  <div class="shop_mall">
    <Navtop></Navtop>
    <Navtwo class="navtwo"></Navtwo>
    <header>
      <div class="banner">
        <template>
          <div class="block">
            <el-carousel trigger="click" height="522px" v-loading="loading">
              <el-carousel-item v-for="item in shopImg" :key="item.id">
                <img :src="item.s_photos[0].path" alt="" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </template>
        <!-- 侧边导航栏 -->
        <div class="category" @mouseleave="leave">
          <ul>
            <li v-for="item in shopList" :key="item.id" @mouseover="over(item)">
              <!-- {{ item }} -->
              <p>{{ item.name }}</p>
              <p>></p>
            </li>
          </ul>
          <!-- 二级导航 -->
          <div class="twoNav" v-show="flag" @mouseleave="leave">
            <div class="top">
              <p>{{ title }}</p>
              <p>全部{{ title }}></p>
            </div>
            <div class="shopImg">
              <div class="imgbox" v-for="item in childList" :key="item.id">
                <p>{{ item.name }}</p>
                <img :src="item.s_goods_photos[0].path" alt="" />
                <!-- @click="skipParticFn(item.id)" -->
              </div>
            </div>

            <hr />
            <!-- 三级导航 -->
            <div class="shopBottom">
              <div
                class="shopBox"
                v-for="item in shopMinBottom"
                :key="item.id"
                @click="ttt(item.id)"
              >
                <img :src="item.s_goods_photos[0].path" alt="" />
                <div class="text">
                  <p>{{ item.name }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <main>
      <!-- 专区分类 -->
      <el-backtop target="" :visibility-height="100"></el-backtop>
      <div class="classifycation" v-loading="loading2">
        <div class="classify_box" v-for="item in classtop" :key="item.id">
          <img :src="item.s_goods_photos[0].path" alt="" />
        </div>
      </div>

      <!-- 秒杀轮播图 -->
      <div class="slideshow">
        <div class="slideshow-title">
          <div class="title_left">
            <div class="imgbox">
              <img src="../assets/shop_mall/silde1.png" alt="" />
            </div>
            <div class="text">
              <span>距离活动结束还有</span>
              <div>1</div>
              <span>天</span>
            </div>
          </div>
          <div class="title_right">
            <span>更多场次</span>
            <div>></div>
          </div>
        </div>

        <div class="slideshow-swiper" v-loading="loading3">
          <swiper :options="swiperOption" class="swipers swiper-no-swiping">
            <swiper-slide v-for="item in swiperimg" :key="item.id">
              <div class="imgbox" @click.stop="ttt(item.id)">
                <div class="imgtop">
                  <img
                    :src="swipertop[0] && swipertop[0].s_goods_photos[0].path"
                    alt=""
                  />
                </div>
                <div class="imgtwo">
                  <img :src="item.s_goods_photos[0].path" alt="" />
                </div>
                <div class="text">
                  <p>{{ item.name }}</p>
                  <p>{{ item.desc }}</p>
                  <p>¥{{ item.price }}</p>
                </div>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
      </div>

      <!-- 热卖专区 -->
      <div class="hootprefec">
        <div class="hootprefec_title">
          <h2>热卖专区</h2>
        </div>
        <div class="boxList" v-loading="loading4">
          <div
            class="shopbox"
            v-for="item in hootprefec"
            :key="item.id"
            @click="ttt(item.id)"
          >
            <div class="imgbox">
              <img :src="item.s_goods_photos[0].path" alt="" />
            </div>
            <div class="text">
              <p>{{ item.name }}</p>
              <p>{{ item.desc }}</p>
              <p>¥{{ item.price }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 精品手机 -->
      <div class="boutphone">
        <div class="boutphone_title">
          <h2>精品手机</h2>
        </div>
        <div class="phoneList" v-loading="loading5">
          <div class="phoneBox_one">
            <div
              class="phonebox"
              v-for="item in boutphone"
              :key="item.id"
              @click="ttt(item.id)"
            >
              <div class="imgbox">
                <img :src="item.s_goods_photos[0].path" alt="" />
              </div>
              <div class="text">
                <p>{{ item.name }}</p>
                <p>{{ item.desc }}</p>
                <p>¥{{ item.price }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 精品配件 -->
      <div class="boutmatch">
        <div class="boutmatch_title">
          <h2>精品配件</h2>
          <ul>
            <li>手机充电</li>
            <li>手机配件</li>
            <li>音乐设备</li>
            <li>更多></li>
          </ul>
        </div>
        <div class="boutmatch_List" v-loading="loading6">
          <div class="boutmatchBox_one">
            <div
              class="boutbox"
              v-for="item in boutphone"
              :key="item.id"
              @click="ttt(item.id)"
            >
              <div class="imgbox">
                <img :src="item.s_goods_photos[0].path" alt="" />
              </div>
              <div class="text">
                <p>{{ item.name }}</p>
                <p>{{ item.desc }}</p>
                <p>¥{{ item.price }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <BottomList></BottomList>
  </div>
</template>

<script>
import Navtop from "../components/navtop";
import Navtwo from "../components/navTwo";
import BottomList from "../components/bottomList";
import { Shopimg, getBanner } from "../api/test";
export default {
  name: "Shop_mall",
  components: {
    Navtop,
    Navtwo,
    BottomList,
  },
  data() {
    return {
      swiperOption: {
        // 一次显示x张图
        slidesPerView: 4,
        // 设置前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 设置自动轮播
        autoplay: {
          delay: 5000, // 5秒切换一次
        },
        // 设置轮播可循环
        loop: true,
      },

      shopList: [],
      childList: [],
      classtop: [],
      swiperimg: [],
      swipertop: [],
      hootprefec: [],
      boutphone: [],
      shopImg: [],
      flag: false,
      shopMinTop: [],
      shopMinBottom: [],
      title: "",
      loading: true,
      loading2: true,
      loading3: true,
      loading4: true,
      loading5: true,
      loading6: true,
    };
  },
  methods: {
    async over(item) {
      //修改状态值
      this.flag = true;
      this.title = item.name;
      this.childList = item.children[0].s_goods;
      this.shopMinBottom = item.children[1].s_goods;
      console.log(this.childList);
      // console.log(this.childList);
      // console.log(item.children[0]);
      // await Shopimg({
      //   project_id: 149,
      //   classify_id: item.children[0].id,
      // }).then((res) => {
      //   console.log(res);
      //   this.shopMinTop = res.data.result.rows;
      //   // console.log(res.data.result.rows);
      // });
      // await Shopimg({
      //   project_id: 149,
      //   classify_id: item.children[1].id,
      // }).then((res) => {
      //   console.log(res);
      //   console.log(JSON.parse(sessionStorage.getItem("shopClassify")));
      //   this.shopMinBottom = res.data.result.rows;
      // });
    },
    leave() {
      this.flag = false;
    },
    ttt(item) {
      this.$router.push({ path: `/particulars/${item}` });
    },

    skipParticFn(id) {
      this.$router.push({ path: `/particulars/${id}` });
    },
  },
  created() {
    //   console.log(this.$store.state.shopLeftNav);
    // console.log(JSON.parse(sessionStorage.getItem("shopClassify")));
    // console.log(this.$store.state.navTwoList);
    this.shopList = JSON.parse(sessionStorage.getItem("shopClassify"));

    if (sessionStorage.getItem("shopImg")) {
      this.shopImg = JSON.parse(sessionStorage.getItem("shopImg"));
      this.loading = false;
    } else {
      getBanner({
        site_id: 137,
        project_id: 98,
      }).then((res) => {
        sessionStorage.setItem("shopImg", JSON.stringify(res.data.result));
        this.shopImg = JSON.parse(sessionStorage.getItem("shopImg"));
        this.loading = false;
      });
    }

    const reqList = [923, 930, 939, 952, 953];
    for (let id of reqList) {
      if (id == 923) {
        if (sessionStorage.getItem("classtop")) {
          this.classtop = JSON.parse(sessionStorage.getItem("classtop"));
          this.loading2 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "classtop",
                JSON.stringify(res.data.result.rows)
              );
              this.classtop = JSON.parse(sessionStorage.getItem("classtop"));
              this.loading2 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 930) {
        if (sessionStorage.getItem("swiperimg")) {
          this.swiperimg = JSON.parse(sessionStorage.getItem("swiperimg"));
          this.loading3 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "swiperimg",
                JSON.stringify(res.data.result.rows)
              );
              this.swiperimg = JSON.parse(sessionStorage.getItem("swiperimg"));
              this.loading3 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 939) {
        if (sessionStorage.getItem("swipertop")) {
          this.swipertop = JSON.parse(sessionStorage.getItem("swipertop"));
          this.loading4 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "swipertop",
                JSON.stringify(res.data.result.rows)
              );
              this.swipertop = JSON.parse(sessionStorage.getItem("swipertop"));
              this.loading4 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 952) {
        if (sessionStorage.getItem("hootprefec")) {
          this.hootprefec = JSON.parse(sessionStorage.getItem("hootprefec"));
          this.loading5 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "hootprefec",
                JSON.stringify(res.data.result.rows)
              );
              this.hootprefec = JSON.parse(
                sessionStorage.getItem("hootprefec")
              );
              this.loading5 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 953) {
        if (sessionStorage.getItem("boutphone")) {
          this.boutphone = JSON.parse(sessionStorage.getItem("boutphone"));
          this.loading6 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "boutphone",
                JSON.stringify(res.data.result.rows)
              );
              this.boutphone = JSON.parse(sessionStorage.getItem("boutphone"));
              this.loading6 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
    }
  },
};
</script>


<style lang="scss" scoped>
.navtwo {
  background-color: #f7f7f7;
  position: relative;
}
.shop_mall {
  header {
    height: 522px;
    .el-carousel__item img {
      width: 2200px;
      height: 100%;
      transform: translateX(-10%);
    }
    .banner {
      margin-bottom: 60px;
      .category {
        position: relative;
        width: 200px;
        height: 442px;
        margin-top: -510px;
        z-index: 4;
        left: 8%;
        ul {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;
          padding: 20px 0;
          background-color: rgba(233, 231, 231, 0.6);
          margin-right: 10px;
          li {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            cursor: pointer;
            font-size: 14px;
          }
          :hover {
            opacity: 1;
            background-color: white;
          }
        }
        .twoNav {
          width: 600px;
          height: 442px;
          padding: 20px;
          background-color: #fff;
          position: absolute;
          top: 0;
          left: 200px;
          // padding-left: 10px;
          .top {
            display: flex;
            justify-content: space-between;
            p {
              font-size: 14px;
            }
            p:last-child {
              font-size: 12px;
              color: rgb(190, 189, 189);
              cursor: pointer;
              &:hover {
                color: red;
              }
            }
          }
          .shopImg {
            margin-top: 20px;
            display: flex;
            justify-content: left;
            flex-wrap: wrap;
            position: relative;
            padding-bottom: 20px;
            .imgbox {
              width: 125px;
              margin-top: 10px;
              margin-left: 15px;
              height: 40px;
              // display: inline;
              position: relative;
              // border: 1px #000 solid;
              p {
                position: absolute;
                left: 17px;
                top: 10px;
              }
              img {
                height: 100%;
              }
            }
          }
          .shopBottom {
            width: 100%;
            margin-top: 20px;
            display: flex;
            justify-content: left;
            flex-wrap: wrap;
            .shopBox {
              width: 30%;
              height: 80px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              img {
                box-sizing: border-box;
                padding: 10px 20px;
                display: block;
                width: 50%;
                height: 100%;
              }
              .text {
                width: 50%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                p {
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
      }
    }
  }
  main {
    background-color: #f7f7f7;
    padding: 0 8%;
    padding-top: 40px;

    .classifycation {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      .classify_box {
        width: 395px;
        height: 200px;
        img {
          width: 100%;
          transition: all 0.5s;
        }
        img:hover {
          box-shadow: 0 3px 15px gray;
          transform: translateY(-2px);
        }
      }
    }
    .slideshow {
      .slideshow-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title_left {
          display: flex;
          align-items: center;
          .imgbox {
            width: 80px;
            height: 30px;
            margin-right: 15px;
          }
          .text {
            display: flex;
            align-items: center;
            span {
              font-size: 18px;
              color: gray;
            }
            div {
              width: 20px;
              height: 30px;
              font-size: 20px;
              font-weight: 700;
              text-align: center;
              color: red;
              font-style: oblique;
            }
          }
        }

        .title_right {
          display: flex;
          align-items: center;
          transition: all 0.3s;
          span {
            font-size: 14px;
          }
          div {
            width: 20px;
            height: 30px;
            font-size: 20px;
          }
        }

        .title_right:hover {
          color: rgb(237, 70, 70);
        }
      }
      .slideshow-swiper {
        margin-top: 30px;
        .swipers {
          .imgbox {
            display: flex;
            flex-direction: column;
            width: 293px;
            height: 390px;
            padding-top: 10px;
            background-color: #fff;
            transition: all 0.3s;
            .imgtop {
              margin-left: 20px;
              margin-top: 15px;
              img {
                width: 73px;
                height: 23px;
                margin: 0;
              }
            }
            .imgtwo {
              img {
                width: 172px;
                height: 172px;
              }
            }

            .text {
              margin-top: 20px;
              flex: 1;
              p:first-child {
                font-size: 18px;
                margin-bottom: 15px;
              }
              p:nth-child(2) {
                font-size: 14px;
                margin-bottom: 15px;
              }
              p:nth-child(3) {
                font-size: 25px;
                color: red;
                font-weight: 500;
                // margin-bottom: 15px;
              }
            }
          }

          .imgbox:hover {
            box-shadow: 0 3px 10px gray;
            transform: translateY(-2px);
          }
        }
      }
    }

    .hootprefec {
      margin-top: 60px;
      width: 100%;
      .hootprefec_title {
        h2 {
          font-size: 30px;
        }
      }

      .boxList {
        display: flex;
        justify-content: space-between;
        .shopbox {
          display: flex;
          flex-direction: column;
          margin-top: 30px;
          width: 395px;
          height: 440px;
          background-color: #fff;
          padding-top: 80px;
          transition: all 0.3s;
          .imgbox {
            height: 290px;
            img {
              width: 230px;
              height: 230px;
              margin: 0 auto;
            }
          }

          .text {
            flex: 1;
            p:first-child {
              font-size: 18px;
              margin-bottom: 20px;
            }
            p:nth-child(2) {
              font-size: 12px;
              margin-bottom: 20px;
            }
            p:nth-child(3) {
              font-size: 16px;
              color: red;
              font-weight: 500;
            }
          }
        }

        .shopbox:hover {
          box-shadow: 0 3px 15px gray;
          transform: translateY(-2px);
        }
      }
    }

    .boutphone {
      padding-top: 50px;
      .boutphone_title {
        margin-bottom: 40px;
        h2 {
          font-size: 30px;
        }
      }
      .phoneList {
        display: flex;
        flex-direction: column;
        .phoneBox_one {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .phonebox {
            width: 290px;
            height: 380px;
            background-color: #fff;
            transition: all 0.3s;
            margin-bottom: 20px;
            .imgbox {
              margin: 0 auto;
              padding-top: 50px;
              width: 172px;
              height: 172px;
              img {
                height: 100%;
              }
            }

            .text {
              margin-top: 20px;
              flex: 1;
              p:first-child {
                font-size: 14px;
                margin-bottom: 15px;
              }
              p:nth-child(2) {
                font-size: 12px;
                margin-bottom: 15px;
              }
              p:nth-child(3) {
                font-size: 14px;
                color: red;
                font-weight: 500;
              }
            }
          }

          .phonebox:hover {
            box-shadow: 0 3px 15px gray;
            transform: translateY(-2px);
          }
        }

        .phoneBox_two {
          margin-top: 10px;
        }
      }
    }

    .boutmatch {
      margin-top: 50px;
      padding-bottom: 50px;
      .boutmatch_title {
        position: relative;
        margin-bottom: 40px;
        h2 {
          font-size: 30px;
        }
        ul {
          top: 25%;
          right: 0;
          position: absolute;
          display: flex;
          li {
            padding: 0 10px;
            font-size: 16px;
            transition: all 0.3s;
            cursor: pointer;
          }

          li:hover {
            color: red;
          }
        }
      }

      .boutmatch_List {
        display: flex;
        flex-direction: column;
        .boutmatchBox_one {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .boutbox {
            width: 290px;
            height: 380px;
            background-color: #fff;
            transition: all 0.3s;
            margin-bottom: 20px;
            // margin-top: 40px;
            .imgbox {
              margin: 0 auto;
              padding-top: 50px;
              width: 172px;
              height: 172px;
              img {
                height: 100%;
              }
            }

            .text {
              margin-top: 20px;
              flex: 1;
              p:first-child {
                font-size: 14px;
                margin-bottom: 15px;
              }
              p:nth-child(2) {
                font-size: 12px;
                margin-bottom: 15px;
              }
              p:nth-child(3) {
                font-size: 14px;
                color: red;
                font-weight: 500;
              }
            }
          }

          .boutbox:hover {
            box-shadow: 0 3px 15px gray;
            transform: translateY(-2px);
          }
        }

        .boutmatchBox_two {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>